<template>
    <div>
        <!-- Recommend goods area 商品推荐 -->
        <div class="recommend-area">
            <div class="recommend-title">
                商品推荐
            </div>
            <div class="recommend-body">
                <swiper :options="swiperOption">
                    <swiper-slide v-for="(item,index) in listData.recommend" :key="index">
                        <div class="recommend-item">
                            <img :src="item.image" width="80%">
                            <!-- <div>{{item.goodsName}}</div> -->
                            <div>￥{{item.mallPrice}}</div>
                            <div class="price">￥{{item.price | priceFl}}</div>
                        </div>
                    </swiper-slide>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

import {money} from '@/filter/money.js'

export default {
    props:['listData'],
    data(){
        return{
            //设置推荐商品的属性
            swiperOption:{
                 //显示分页
                pagination: {
                    el: '.swiper-pagination',
                },
                loop:true,
                //设置同屏显示的数量，默认为1，使用auto是随意的意思。
                slidesPerView:3,
                //设置自动播放速度
                autoplay: {
                    disableOnInteraction: false,
                    delay:4000
                },
            }
        }
    },
    components:{
        swiper,
        swiperSlide,
    },
    filters:{
        //过滤器补0
        priceFl:function(value){
            return money(value)
        }
    }
}
</script>

<style>
/*商品推荐*/
.recommend-area{
    background: #FFF;
}
.recommend-title{
    color:#e5017d;
    font-size:.8rem;
    padding:.5rem;
}
.recommend-body{
    border-top:1px solid #EEE;
}
.recommend-item{
    padding:.5rem 0px;
    border-right:1px solid #EEE;
    text-align: center;
    font-size:.7rem;
}
.recommend-item .price{
    color:#999;
    text-decoration:line-through; 
}
.recommend-item img{
    display:block;
    margin:0px auto;
}
</style>

